@import "./diyList";

.CameraVideo {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
	border-radius: 2px;
	padding: 24px;
	padding-top: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;

	& > .CameraVideoBox {
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow: hidden;
		position: relative;

		& > .cameraList {
			flex: 1;
			width: 100%;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: wrap;

			& > .VideoBox {
				width: calc(100% / 3 - 16px);
				height: calc(100% / 2 - 16px);
				background: rgba(0, 0, 0, 0.35);
				position: relative;
				z-index: 1;
				margin: 0 8px;

				& > .VideoBtm {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 40px;
					background: rgba(0, 0, 0, 0.35);
					z-index: 1;
					color: white;
					padding: 0 16px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					user-select: none;
					transition: all 0.35s;

					&:hover {
						height: 160px;

						& > .Text {
							width: 50%;
							flex-direction: column;
							align-items: flex-start;

							& > div {
								& > div:first-child {
									display: flex;
								}
							}
						}

						& > .Options {
							display: flex;
						}
					}

					& > .Text {
						flex: 2;
						display: flex;
						align-items: center;
						justify-content: space-between;
						transition: all 0.35s;

						& > div {
							display: flex;
							font-size: 20px;
							font-family: ShuHeiTi;
							font-weight: bold;
							color: #ffffff;
							transition: all 0.35s;

							& > div:first-child {
								display: none;
							}
						}

						// &>div:first-child {
						// 	display: none;
						// }
					}

					& > .Options {
						flex: 1;
						display: none;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						transition: all 0.35s;

						// background: yellow;
						& > div:first-child {
							font-size: 20px;
							font-family: ShuHeiTi;
							font-weight: bold;
							color: #ffffff;
						}

						& > div:last-child {
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-wrap: wrap;

							& > button {
								margin: 8px 0;
							}
						}
					}
				}
			}
		}

		& > .pagination {
			width: 100%;

			& > ul {
				width: 100%;
				display: flex;

				& > li:first-child {
					flex: 1;
				}
			}
		}
	}
}

.CameraVideoDrawer {
	.ant-form-item-label {
		width: 120px;
		text-align: right;
		margin-right: 4px;
	}
	.Options {
		display: flex;
		align-items: center;
		justify-content: center;
		& > button {
			margin: 0 16px;
		}
	}
}
